<template>
  <div style="width: 100%;display: flex;justify-content: center;flex-direction: column">
    <div style="width: 1000px;margin: 50px auto 0;display:flex; justify-content: center;">
      <div style="width: 500px;">
        <div>
          <div class="left_top">
            <img class="img1" :src="book.info.coverAddress"
                 alt="">
          </div>
          <div class="left_bottom">
            <div class="min_img">
              <img :src="book.info.coverAddress" alt=""/>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-right">
        <div class="detail-name">
          <span>{{ book.info.name }}</span>
        </div>
        <div class="detail-price">
          <div class="detail-d1">
            <span style="color: #989099;font-size: 16px;">价格：</span>
          </div>
          <div class="detail-d2">
            <div>
              <span style="color: red;">￥</span>
              <span style="font-size: 30px;color: red;">
                        {{ this.submitBook.price * this.submitBook.num * this.submitBook.year |myFilter }}
                    </span>
              <span style="text-decoration: line-through;">￥{{
                  this.submitBook.price * this.submitBook.num * this.submitBook.year * 1.25 |myFilter
                }}</span>
            </div>
          </div>
          <div class="detail-discount">
            <div>
              <img src="../assets/foot/discount.png" alt="">
            </div>
          </div>
        </div>
        <div class="order">
          <div class="detail-info">
            <div>
              <label>起刊日期：</label>
              <el-date-picker
                  v-model="submitBook.startTime"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div>
              <label>订阅年数：</label>
              <el-radio-group v-model="submitBook.year" size="mini">
                <el-radio-button label="1">一年/{{ book.info.periods }}期</el-radio-button>
                <el-radio-button label="2">两年/{{ book.info.periods * 2 }}期</el-radio-button>
                <el-radio-button label="3">三年/{{ book.info.periods * 3 }}期</el-radio-button>
              </el-radio-group>
            </div>
            <div>
              <label>订阅数量：</label>
              <el-input-number style="margin: 20px 15px" size="mini" :min="1" :max="book.info.num"
                               v-model="submitBook.num"></el-input-number>
            </div>
            <div>
              <label>期数：{{ book.info.periods }}</label>
            </div>
          </div>
          <div class="detail-button">
            <div class="detail-btn">
              <el-button type="primary" @click="addCarts('order')">立即订阅</el-button>
            </div>
            <div class="detail-btn">
              <el-button type="success" @click="addCarts('cart')">加入购物车</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="width: 100%">
      <div class="detail-detail">
        <el-menu default-active="商品详情" class="el-menu-demo detail-detail" mode="horizontal">
          <el-menu-item index="商品详情">商品详情</el-menu-item>
          <el-menu-item index="商品评论">商品评论</el-menu-item>
        </el-menu>
        <div style="margin: 20px 0 100px">
          <div style="width: 100%; height: 40px; border-bottom: 1px solid #bdbdbd">
            <label style="margin-left: 10px">商品编号：{{ book.info.id }}</label>
          </div>
          <div style="margin-left: 10px">
            <div>
              <h4 style="font-size: 20px;line-height: 74px; color: #66abbc;">{{ book.info.name }}简介</h4>
            </div>
            <div>
              <p style="color:#41436c;">&nbsp;{{ book.info.intro }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-descriptions v-for="(addr,index) in addressList" :key="index" border style="margin-bottom: 10px">
        <el-descriptions-item label="用户名">{{ addr.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ addr.phone }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">{{ addr.tag }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ addr.address }}</el-descriptions-item>
        <el-descriptions-item label="操作">
          <el-button type="primary" size="mini" @click="selectAddr(addr.id)">选择该地址</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="state.total>2">
        <el-pagination
            background
            @current-change="getAddress"
            :current-page.sync="state.page"
            :page-size="state.size"
            layout="prev, pager, next"
            :total="state.total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import axios from "axios";
import {getToken} from "@/store/token";

export default {
  name: "detail",
  data() {
    return {
      state: {
        page: 1,
        size: 2,
        total: 0
      },
      addressList: '',
      book: {
        id: 0,
        info: ''
      },
      submitBook: {
        addressId: '',
        userId: '',
        periodicalId: '',
        //购买数量
        num: '1',
        //买多少年
        year: '1',
        //起刊时间
        startTime: '',
        name: '',
        price: '',
        total: '',
        coverAddress: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }

        }]
      },
      dialogTableVisible: false,
    }
  }, filters: {
    myFilter(value) {
      return parseFloat(value).toFixed(2);
    }
  },
  methods: {
    addCarts(type) {
      if (getToken('user') == null) {
        this.$message({
          message: '请先登录',
          type: 'warning'
        });
      } else {
        this.submitBook.userId = JSON.parse(getToken('user')).id;
        if (this.submitBook.startTime === "") {
          this.$message({
            message: '请选择起刊日期',
            type: 'warning'
          });
        } else {
          this.submitBook.total = this.submitBook.price * this.submitBook.num * this.submitBook.year;
          if (type === "cart") {
            this.addCart()
          } else if (type === "order") {
            this.orderDetail()
            //this.addOrder()
          }
        }
      }
    },
    addCart() {
      this.$api.cart.addCarts(this.submitBook).then((res) => {
        if (res.data.success) {
          this.$message({
            message: '加入购物车成功',
            type: 'success'
          });
        } else {
          this.$message.error('加入购物车失败');
        }
      }).catch((res) => {
        this.$message.error('访问服务器'+res);
      })
    },
    getAddress() {
      this.$api.address.getAddress(
          this.state.page,
          this.state.size,
          JSON.parse(getToken('user')).id,
          ''
      ).then((res) => {
        var data = res.data;
        if (data.success) {
          this.addressList = data.content
          this.state.total = Number(data.total)
        } else {
          this.$message.error(data.message);
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      })
    },
    selectAddr(id) {
      this.submitBook.addressId = id
      this.addOrder()
    },
    orderDetail() {
      this.$router.push({
        name: 'pay',
        params: {
          order: JSON.stringify(this.submitBook)
        }
      });
    }
  },
  mounted() {
    this.book.id = this.$route.query.id;
    this.$api.book.getBookById(this.book.id).then((res) => {
      var data = res.data;
      if (data.success) {
        this.book.info = data.content;
        this.submitBook.periodicalId = this.book.id;
        this.submitBook.name = this.book.info.name;
        this.submitBook.periods = this.book.info.periods
        this.submitBook.coverAddress = this.book.info.coverAddress
        this.submitBook.price = this.book.info.price;
      } else {
        this.$message.error('服务器返回失败');
      }
    }).catch((resp) => {
      this.$message.error('数据获取失败' + resp);
    });
  }
}
</script>

<style scoped>
label {
  color: #666;
}

.left_top {
  display: flex;
  width: 450px;
  height: 450px;
  background-color: #dcdcdc;
  justify-content: center;
  align-items: center;
}

.left_bottom {
  padding-top: 10px;
}

.img1 {
  width: 250px;
  height: 350px;
}

.detail-right {
  padding: 10px;
  width: 400px;
}

.min_img {
  padding: 10px 60px;
//width: 350px; display: flex; overflow: hidden;

}

.min_img img {
  width: 15%;
  margin: 0 10px;
}

.detail-name span {
  font-weight: bold;
  font-size: 28px;
}

.detail-price {
  display: flex;
  height: 80px;
  margin-top: 15px;
  position: relative;
  background-color: #ececec;
}

.detail-d1 {
  display: flex;
  margin-left: 10px;
  flex-direction: column;
  justify-content: center;
}

.detail-d2 {
  display: flex;
  margin-left: 10px;
  flex-direction: column;
  justify-content: center;
}

.order {

}

.detail-info {
  display: flex;
  height: 280px;
  padding-top: 10px;
  flex-direction: column;
  justify-content: space-around;
}

.detail-discount {
  position: absolute;
  right: 30px;
}

.detail-button {
  height: 80px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.el-button {
  width: 150px;
}

.detail-detail {
  width: 950px;
  margin: 0 auto;
  background: none;
  border-bottom: none;
}
</style>